<template>
  <v-chart class="chart" :option="option" />
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { graphic } from "echarts/core";
// import { countUserNum } from "@/api";
import { ElMessage } from "element-plus";
import { useMapLayerStore } from "@/stores";
import { LayerInfoType } from "@/types";
import { mapLayerEnum } from "@/enums";
import { exportJsonToExcel } from "@/utils"

const mapLayerStore = useMapLayerStore();

let downloadList: Record<string, any>[] | { 评价等级: string; 评价数量: number; }[] = [];

const download = () => {
  exportJsonToExcel(downloadList, "评价结果分布", "统计结果")
};
// const option = ref({
//   xAxis: {
//     type: "category",
//     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
//   },
//   yAxis: {
//     type: "value",
//   },
//   grid: {
//     left: "40px",
//     right: "20px",
//     bottom: "40px",
//     top: "20px",
//   },
//   series: [
//     {
//       data: [120, 200, 150, 80, 70, 110, 130],
//       type: "bar",
//       barWidth: 20,
//       itemStyle: {
//         color: "#00fdfa",
//       },
//     },
//   ],
// });
const option = computed(() => {
  const currentData = mapLayerStore.currentMapData;
  const currentType = mapLayerStore.mapType;
  const keyObject = {
    [mapLayerEnum.ISSUE]: "solution_satisfaction",
    [mapLayerEnum.PROJECT]: "satisfaction",
    [mapLayerEnum.RECTIFICATION]: "evaluationScore",
  };
  const data: { [key: string]: number } = {};
  if (currentData.length) {
    currentData.map((item: LayerInfoType) => {
      const typeKey = keyObject[currentType as mapLayerEnum];
      const score: number = item[typeKey as keyof LayerInfoType] as number;
      let key = "A（80-100）";
      if (score < 20) {
        key = "E（0-20）";
      } else if (score < 40) {
        key = "D（20-40）";
      } else if (score < 60) {
        key = "C（40-60）";
      } else if (score < 80) {
        key = "B（60-80）";
      }
      if (key !== null && key !== undefined) {
        if (data[key]) {
          data[key]++;
        } else {
          data[key] = 1;
        }
      }
    });
    const newData = Object.entries(data).map(([key, value]) => {
      return {
        name: key,
        value,
      };
    });
    downloadList = Object.entries(data).map(([key, value]) => {
      return {
        "评价等级": key,
        "评价数量": value,
      };
    });
    return {
      tooltip: {
        trigger: "item",
      },
      color: ["#00fdfa", "#07f7a8", "#e3b337", "#87CEFA", "#32CD32"],
      legend: {
        show: false,
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            color: "#ffffff",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 20,
              fontWeight: "normal",
              color: "#ffffff",
            },
          },

          data: newData,
        },
      ],
    };
  } else {
    return {
      tooltip: {
        trigger: "item",
      },
      legend: {
        show: false,
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [],
        },
      ],
    };
  }
});

defineExpose({
  download
})


</script>

<style scoped lang="scss"></style>
